let 和 const 命令
let 命令
基本用法
ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
1
2
3
4
5
6
7
8{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。
这表明,let声明的变量只在它所在的代码块有效。for循环的计数器,就很合适使用let命令。
1
2
3
4for (let i = 0; i < 10; i++) {
console.log(i);
}
上面的代码会依次打印出0-9, 这与var声明是不同的, 说明了每一次循环, 都是在不同的作用域内声明不同的i变量另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15for (let i = 0; i < 10; i++) {
let i = 'abc'
console.log(i);
}
// abc
// abc
// abc
上面的代码会打印3次 'abc', 说明设置变量的作用域和循环体内的作用域是两个不同的作用域,
对比下面的代码, 循环体内没有使用let 重新声明i, 意味着修改的是父作用域中的变量
for (let i = 0; i < 10; i++) {
i = 'abc'
console.log(i);
}
// 'abc'
不存在变量提升
- 简而言之, let 声明变量之前, 是禁止使用该变量的, 而使用 var 声明的变量, 变量会提升, 为undefined
暂时性死区
只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
1
2
3
4
5
6
7var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,
导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
1
2
3
4
5
6
7
8
9
10
11
12if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”。“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。
1
2
3
4
5
6
7typeof abc
let abc
// 上面的代码在let声明之前,都属于abc变量的“死区”,只要用到该变量就会报错
typeof abc
var abc
// 相比var声明,此时typeof为undefined
总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取、
只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。
1
2
3
4
5
6
7
8
9
10
11// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}因此,不能在函数内部重新声明参数。
1
2
3
4
5
6
7
8
9function func(arg) {
let arg; // 报错
}
function func(arg) {
{
let arg; // 不报错
}
}
块级作用域
为什么需要块级作用域?
- ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
1.0 第一种场景,内层变量可能会覆盖外层变量。1
2
3
4
5
6
7
8
9
10var tmp = 'abc';
function f() {
console.log(tmp);
if(false) {
var tmp = '123'
}
}
f()
// 上面代码在声明阶段,if代码块内部 tmp 变量覆盖了外层的 tmp 变量,所以导致输出undefined
2.0 第二种场景,用来计数的循环变量泄露为全局变量。1
2
3
4
5
6
7
8
9var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
// 上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。
ES6 的块级作用域
let实际上为 JavaScript 新增了块级作用域。
1
2
3
4
5
6
7
8
9function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
// 上面的函数有两个代码块,都声明了变量n,运行后输出 5。
// 这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是 10。块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。
1
2
3
4
5
6
7
8
9
10
11// IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
const 命令
const声明一个只读的常量。一旦声明,常量的值就不能改变。
1
2
3
4
5
6const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
// 上面代码表明改变常量的值会报错。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
1
2
3const foo;
// SyntaxError: Missing initializer in const declaration
// 上面代码表示,对于const来说,只声明不赋值,就会报错。const的作用域与let命令相同:只在声明所在的块级作用域内有效。
1
2
3
4
5if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not definedconst命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
1
2
3
4
5if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
// 上面代码在常量MAX声明之前就调用,结果报错。const声明的常量,也与let一样不可重复声明。
1
2
3
4
5
6var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。
因此,将一个对象声明为常量必须非常小心。
如果想将对象冻结,应该使用Object.freeze方法。
ES6 声明变量的六种方法
- var
- function
- let
- const
- import
- class
顶层对象的属性
- ES6 为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性。
- let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。
- 也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。
1
2
3
4
5
6
7var a = 1;
// 如果在 Node 的 REPL 环境,可以写成 global.a
// 或者采用通用方法,写成 this.a
window.a // 1
let b = 1;
window.b // undefined